<template>
  <div>
    <div class="full-screen">
      <div class="form">
        <div class="file-block">
          <h4 class="hairlines"><span>第一步:  </span>请拍摄身份证<span>正面</span></h4>
          <div class="photo">
            <div class="container">
              <img :src="info.id_card_front" ref="IDZToImg">
              <input class="required" type="file" ref="IDZInput">
            </div>
          </div>
        </div>
        <div class="file-block">
          <h4 class="hairlines"><span>第二步:  </span>请拍摄身份证<span>反面</span></h4>
          <div class="photo">
            <div class="container">
              <img :src="info.id_card_back" ref="IDFToImg">
              <input class="required" type="file" ref="IDFInput">
            </div>
          </div>
        </div>
        <div class="file-block">
          <h4 class="hairlines"><span>第三步:  </span>手持身份证<span>正面照</span></h4>
          <div class="photo">
            <div class="container">
              <img :src="info.id_hand" ref="FACEToImg">
              <input class="required" type="file" ref="FACEInput">
            </div>
          </div>
        </div>
      </div>
      <footer class="form-footer">
        <button class="return hairlines-top" @click="back"><i class="iconfont icon-return2"></i>返回</button>
        <input class="next" type="button" value="保存，下一步" @click="toNext" :disabled="info.checkStatus">
      </footer>
    </div>
    <loading-tem v-if="loadingIsShow" :show="loadingIsShow"></loading-tem>
  </div>
</template>
<script>
  import $ from 'edom'
  import loading from '../loading/loading.vue'
  import fileRead from '../../assets/js/fileRead.js'
  import IDZimg from '../../assets/img/ID_positive.png'
  import IDFimg from '../../assets/img/ID_opposite.png'
  import FACEimg from '../../assets/img/face.png'

  export default {
    name: 'CheckID',
    components: {
      'loading-tem': loading
    },
    data () {
      return {
        title: '身份验证',
        loadingIsShow: false,
        QNYtoken: null,
        base64Image: [null, null, null],
        saveData: [null, null, null],
        info: {
          id_card_front: IDZimg,
          id_card_back: IDFimg,
          id_hand: FACEimg
        }
      }
    },
    methods: {
      back () {
        this.$router.push('/warrantor/manage')
      },
      toNext () {
        let required = $('.required')
        let length = required.length
        let curObj = null
        for (let i = 0; i < length; i++) {
          curObj = required[i]
          if (!curObj.value) {
            $().Mnews('有照片没有上传', 1000)
            return
          }
        }
        this.loadingIsShow = true
        let QNYpromise = new Promise(this.getQNYToken)
        QNYpromise.then(() => {
          return new Promise(this.uploadQNY)
        }).then(() => {
          this.saveInfo()
        })
      },
      getQNYToken: function (resolve) {
        this.axios.post('/api/qiniu/get_up_token', {
          user_id: this.$store.state.user_id,
          token: this.$store.state.token
        })
        .then((res) => {
          let data = res.data
          let code = data.code
          let desc = data.desc
          if (code === 200) {
            this.QNYtoken = desc
            resolve()
          } else {
            $().Mnews(desc, 1000)
          }
        })
      },
      uploadQNY: function (resolve) {
        let length = this.base64Image.length
        let base = 0
        for (let i = 0; i < length; i++) {
          const pic = this.base64Image[i]
          const url = 'http://upload.qiniu.com/putb64/-1'
          const xhr = new XMLHttpRequest()
          xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
              let data = JSON.parse(xhr.responseText)
              this.QNYhash = data.hash
              this.QNYkey = data.key
              this.saveData[i] = this.QNYkey
              base++
              if (base === length) {
                resolve()
              }
            }
          }
          xhr.open('POST', url, true)
          xhr.setRequestHeader('Content-Type', 'application/octet-stream')
          xhr.setRequestHeader('Authorization', 'UpToken ' + this.QNYtoken)
          xhr.send(pic)
        }
      },
      saveInfo: function () {
        this.axios.post('/api/guarantee/upload_id_card', {
          user_id: this.$store.state.user_id,
          token: this.$store.state.token,
          id_card_front: this.saveData[0],
          id_card_back: this.saveData[1],
          id_hand: this.saveData[2]
        })
        .then((res) => {
          let data = res.data
          this.loadingIsShow = false
          if (data.code === 1) {
            this.$store.commit('warrantorStepSet', 3)
            this.$router.push('/warrantor/manage')
          } else {
            $().Mnews(data.desc, 1000)
          }
        })
      }
    },
    created () {
      this.setTitle(this.title)
    },
    mounted () {
      let file = this.$refs
      let inputArr = [file.IDZInput, file.IDFInput, file.FACEInput]
      let lockWidth = file.IDZInput.offsetWidth * 2
      for (let i = 0; i < 3; i++) {
        fileRead(inputArr[i], {
          readAs: 'dataurl',
          zip: true,
          zipWidth: lockWidth,
          zipQuality: 0.7,
          loadStart: () => {
            this.loadingIsShow = true
          },
          loadEnd: () => {
            setTimeout(() => {
              this.loadingIsShow = false
            }, 300)
          },
          success: (result, resultHandle) => {
            if (i === 0) this.info.id_card_front = result[0]
            if (i === 1) this.info.id_card_back = result[0]
            if (i === 2) this.info.id_hand = result[0]
            this.base64Image[i] = resultHandle[0]
          },
          error: function (msg) {
            $().Mnews(msg, 1000)
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '../../styles/form.scss';
  .form{
    .file-block{
      margin-bottom: rem(10);
      h4{
        span{
          color: #72a5ef;
        }
      }
    }
  }
  .next:disabled{
    background: #d0d0d0;
  }
</style>
